<%- contentFor('heroContent') %>

  <!-- Hero Banner with Search -->
  <div class="hero-banner detail-hero-banner">
    <div class="hero-content">
      <div class="search-box-container">
        <form action="/search" method="GET" class="main-search-form">
          <div class="search-select-wrapper">
            <select name="searchType">
              <option value="all">All</option>
              <option value="title">Title</option>
              <option value="author">Author</option>
              <option value="isbn">ISBN(13 digits)</option>
              <option value="issn">ISSN(8 digits)</option>
              <option value="publisher">Publisher</option>
            </select>
          </div>
          <input type="text" name="query" placeholder="Type ISBN or title..." class="main-search-input">
          <button type="submit" class="main-search-btn">
            <i class="search-icon"></i>
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- 面包屑导航 -->
  <div class="breadcrumb">
    <a href="/">Home</a> &gt; <a href="/search">Search</a> &gt; <%= detail ? detail.Title : 'Detail' %>
  </div>

  <div class="page-container detail-page search-detail-page">
    <div class="publisher-sidebar">
      <h3>Publisher Imprints</h3>
      <ul class="publisher-list">
        <li>
          <a href="/search" class="publisher-link">
            All <span class="count">(All)</span>
          </a>
        </li>

        <% if (categories && categories.length> 0) { %>
          <% categories.forEach(function(category) { %>
            <li>
              <a href="/search?category=<%= encodeURIComponent(category.name) %>" class="publisher-link">
                <%= category.name %> <span class="count">(<%= category.count %>)</span>
              </a>
            </li>
            <% }); %>
              <% } else { %>
                <li>No categories found</li>
                <% } %>
      </ul>
    </div>
    <!-- 详情内容 -->
    <div class="detail-content">
      <% if (error) { %>
        <div class="error-message">
          <p>
            <%= error %>
          </p>
          <!-- <a href="/search" class="back-link">Back to Search</a> -->
        </div>
        <% } else if (detail) { %>
          <div class="book-details-wrapper">
            <!-- 封面 -->
            <div class="book-cover-large">
              <% if (detail.CoverImage) { %>
                <img src="<%= detail.CoverImage %>" alt="<%= detail.Title || 'Cover' %>" class="detail-cover-image">
                <% } else { %>
                  <img src="/images/img.png" alt="<%= detail.Title || 'Cover' %>"
                    class="detail-cover-image placeholder-image">
                  <% } %>
            </div>

            <!-- 基本信息（表格外） -->
            <div class="book-info-detail">
              <h1 class="book-title-large">
                <%= detail.Title || detail.Journals || 'Untitled Item' %>
              </h1>

              <% if(detail.Authors) { %>
                <div class="book-main-info">
                  <div class="detail-authors">
                    <span class="author-label">Authors:</span>
                    <a href="#">
                      <%= detail.Authors %>
                    </a>
                  </div>
                </div>
                <% } %>

                  <div class="book-main-info">
                    <div class="detail-series">
                      <span class="series-label">Edition:</span>
                      <a href="#">
                        <%= detail.Edition %>
                      </a>
                    </div>
                  </div>

                  <% if(detail.Publisher) { %>
                    <div class="book-main-info">
                      <div class="detail-publisher">
                        <span class="publisher-label">Publisher:</span>
                        <%= detail.Publisher %>
                      </div>
                    </div>
                    <% } %>


            </div>
          </div>
          <!-- 其他详细信息（表格内） -->
          <div class="book-details-table-container">
            <table class="book-details-table">
              <tbody>
                <% if(detail.ISBN) { %>
                  <tr>
                    <th>ISBN</th>
                    <td>
                      <%= detail.ISBN %>
                    </td>
                  </tr>
                  <% } %>

                    <% if(detail.ISSN) { %>
                      <tr>
                        <th>ISSN</th>
                        <td>
                          <%= detail.ISSN %>
                        </td>
                      </tr>
                      <% } %>

                        <% if(detail.Language) { %>
                          <tr>
                            <th>Language</th>
                            <td>
                              <%= detail.Language %>
                            </td>
                          </tr>
                          <% } %>

                            <% if(detail['Publication frequency']) { %>
                              <tr>
                                <th>载体形态</th>
                                <td>
                                  <%= detail['Publication frequency'] %>
                                </td>
                              </tr>
                              <% } %>

                                <% if(detail.FormatType) { %>
                                  <tr>
                                    <th>FormatType</th>
                                    <td>
                                      <%= detail.FormatType %>
                                    </td>
                                  </tr>
                                  <% } %>

                                    <% Object.keys(detail).forEach(function(key) { const skipFields=['id', 'sourceType'
                                      , 'CoverImage' , 'Title' , 'Journals' , 'Authors' , 'ISBN' , 'ISSN' , 'Language'
                                      , 'Publication frequency' , 'Publisher' , 'FormatType' , 'Abstract'
                                      , 'Introduction' , 'abstract' , 'description' , 'Description' ]; if
                                      (!skipFields.includes(key) && detail[key]) { %>
                                      <tr>
                                        <th>
                                          <%= key %>
                                        </th>
                                        <td>
                                          <%= detail[key] %>
                                        </td>
                                      </tr>
                                      <% } }); %>
              </tbody>
            </table>
          </div>


          <% if (detail.Abstract || detail.abstract || detail.description || detail.Description || detail.Introduction)
            { %>
            <!-- 描述部分 -->
            <div class="book-description">
              <h3>Description</h3>
              <div class="description-content">
                <%= detail.Abstract || detail.abstract || detail.Introduction || detail.description ||
                  detail.Description %>
              </div>
            </div>
            <% } %>


              <% } else { %>
                <div class="not-found">
                  <p>未找到相关内容</p>
                </div>
                <% } %>
    </div>
  </div>

  <%- contentFor('style') %>
    <link rel="stylesheet" href="/css/search-detail.css">
    <style>
      .detail-cover-image {
        width: 140px;
        height: 172px;
        object-fit: cover;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
      }

      .book-details-wrapper {
        display: flex;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
      }

      .book-cover-large {
        flex: 0 0 140px;
        margin-right: 25px;
      }

      .book-info-detail {
        flex: 1;
      }

      .book-title-large {
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 15px;
        color: #333;
      }

      .book-main-info {
        margin-bottom: 10px;
        font-size: 16px;
        color: #555;
      }

      .author-label,
      .publisher-label,
      .series-label {
        font-weight: 600;
        color: #333;
        display: inline-block;
        width: 80px;
        text-align: right;
        padding-right: 10px;
      }

      .detail-authors a,
      .detail-series a {
        color: #0066cc;
        text-decoration: none;
      }

      .detail-authors a:hover,
      .detail-series a:hover {
        text-decoration: underline;
      }

      .book-details-table-container {
        margin-top: 30px;
        margin-bottom: 30px;
      }

      .details-table-title {
        font-size: 18px;
        margin-bottom: 15px;
        color: #333;
      }

      .book-details-table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #ddd;
      }

      .book-details-table th,
      .book-details-table td {
        padding: 10px 15px;
        border: 1px solid #ddd;
        text-align: left;
      }

      .book-details-table th {
        width: 25%;
        background-color: #f5f5f5;
        font-weight: 600;
      }

      .more-info-links {
        margin-top: 30px;
        margin-bottom: 30px;
      }

      .more-info-links h3 {
        font-size: 18px;
        margin-bottom: 15px;
        color: #333;
      }

      .links-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }

      .links-list li {
        margin-bottom: 8px;
      }

      .links-list a {
        color: #0066cc;
        text-decoration: none;
      }

      .links-list a:hover {
        text-decoration: underline;
      }

      .book-description {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #eee;
      }

      .description-content {
        line-height: 1.6;
        color: #333;
      }

      .detail-actions {
        margin-top: 30px;
        padding-top: 15px;
        border-top: 1px solid #eee;
      }

      .back-btn {
        display: inline-block;
        padding: 8px 20px;
        background-color: #111579;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        font-size: 14px;
        transition: background-color 0.2s;
      }

      .back-btn:hover {
        background-color: #0d1162;
      }

      .not-found {
        text-align: center;
        padding: 50px 0;
      }

      .not-found p {
        font-size: 18px;
        color: #666;
        margin-bottom: 20px;
      }

      @media (max-width: 767px) {
        .book-details-wrapper {
          flex-direction: column;
        }

        .book-cover-large {
          margin-right: 0;
          margin-bottom: 20px;
          text-align: center;
        }

        .book-details-table th {
          width: 35%;
        }

        .author-label,
        .publisher-label,
        .series-label {
          width: 70px;
        }
      }
    </style>
